import {observable, autorun, computed, action} from 'mobx';
import React, {Component} from 'react';
import * as ReactDom from 'react-dom';
import {observer, Provider, inject} from 'mobx-react';


const sleep = (delay, v) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            try {
                resolve(v);
            } catch (e) {
                reject(0);
            }
        }, delay);
    });
};


class Store {
    @observable todoList = [];

    @computed get getLength() {
        return this.todoList.length;
    }

    @action add = () => {
        this.todoList.push('a');
    };
    @action sub = () => {
        this.todoList.pop();
    };

    @action.bound
    async add2() {
        console.log(11111);
        const a = await sleep(5000, 'ddddddd');
        this.todoList.push(a);
        console.log(222222);
    }
}

const Fn = observer((props)=>{
    console.log(props)
    return <div>{props.store.todoList.length}</div>
})

const Fn2 = inject('store','color')(observer((props)=>{
    console.log(props,111)
    return <div>{props.store.todoList.length}</div>
}))

const store= new Store();
@inject('test','color')
@observer
class Foo extends Component {
    render() {
        console.log(this,55)
        return <div>
            {this.props.color}
        </div>;
    }
}

@inject('store')
// @observer
class Bar extends Component {
    render() {
        const store = this.props.store
        console.log(this)
        return <div>
            <div>{store.todoList.length}</div>
            <div onClick={store.add}>add</div>
            <div onClick={store.sub}>sub</div>
            <ul>{store.todoList.map((item, index) => {
                return <li key={index}>{item}</li>;
            })}</ul>
            <Foo />
            <Fn2  />
        </div>;
    }
}


class App extends Component {
    render() {
        return (
            <Provider store={store} color='red' test='blue'>
                <Bar />
            </Provider>
        );
    }
}

ReactDom.render(
    <App/>,
    document.querySelector('#root')
);